import React, { useState, useEffect } from 'react';
import { Button, Table, Input, Space, Modal, Form, message } from 'antd';
import type { TableColumnsType } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import styles from './index.less';
import RC from '@/assets/imgs/木材.png';
import { getCustomer, addCustomer, delCustomer, editCustomer, searchCustomer } from '@/api/services';


interface DataType {
    key: React.Key;
    name: string;
    age: string;
    address: string;
    address2: string;
    person: string;
}

const WareHouseManagement: React.FC = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [searchValue, setSearchValue] = useState<string>('');
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [data, setData] = useState([]);
    const [form] = Form.useForm();
    const [form1] = Form.useForm();
    const [modalOpen, setModalOpen] = useState(false);  //控制新增客户弹窗
    const [editModalOpen, setEditModalOpen] = useState(false);  //控制编辑客户弹窗
    const [customerid, setCustomerId] = useState('');


    const hasSelected = selectedRowKeys.length > 0;

    //获取客户列表
    const getCustomerList = () => {
        getCustomer({
            page: page,
            size: 10
        }).then((res: any) => {
            if (res.status == 200) {
                setData(res.results);
                setTotal(res.length);
            }

        })
    }

    useEffect(() => {
        getCustomerList();
    }, [page]);

    const handleChange = (e: any) => {
        setSearchValue(e.target.value);
        if (!e.target.value) {
            getCustomerList();
        }
    };
    const onSearch = () => {
        searchCustomer({ page: page, size: 10, name: searchValue })
            .then((res: any) => {
                if (res.status == 200) {
                    console.log(res);
                    setData(res.results);
                }

            })
    }

    //新增客户
    const addCustomerList = async () => {
        const validate = await form.validateFields();
        addCustomer({
            name: validate.customer_name,
            tel: validate.customer_tel,
            company: validate.customer_company,
            detail: validate.customer_detail,
        }).then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                message.success('新增成功');
                setModalOpen(false);
                getCustomerList();
            }

        })
    }

    //编辑客户
    const editCustomerList = async () => {
        const validate = await form1.validateFields();
        console.log('111', validate);
        editCustomer({
            customerId: customerid,
            name: validate.customer_name,
            tel: validate.customer_tel,
            company: validate.customer_company,
            detail: validate.customer_detail,
        }).then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                message.success('编辑成功');
                getCustomerList();
                setEditModalOpen(false);
            }

        })
    }

    //删除客户
    const delCustomerList = (id: any) => {
        console.log('id', id);
        delCustomer({
            customerId: id
        }).then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                message.success('删除成功');
                getCustomerList();
            }

        })
    }

    const columns = [
        {
            title: '客户姓名',
            dataIndex: 'customer_name',
        },
        {
            title: '客户电话',
            dataIndex: 'customer_tel',
        },
        {
            title: '客户所在公司',
            dataIndex: 'customer_company',
        },
        {
            title: '公司介绍',
            dataIndex: 'customer_detail',
        },
        {
            title: 'Action',
            dataIndex: '',
            key: 'x',
            render: (text: any, record: any) =>
                <Space size="middle">
                    <a
                        onClick={() => {
                            setEditModalOpen(true);
                            setCustomerId(record.customer_id);
                            // setCustomer(record);
                            form1.setFieldsValue(record);
                            // console.log('customer', record);
                        }}
                    >
                        编辑
                    </a>
                    <a onClick={() => { delCustomerList(record.customer_id) }}>删除</a>
                </Space>
        },
    ];

    //新增客户footer
    const ModalFooter = (
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button
                type="primary"
                style={{ marginRight: 16, borderRadius: 6 }}
                onClick={addCustomerList}
            >
                确定
            </Button>
            <Button
                style={{ marginRight: 16, borderRadius: 6 }}
                onClick={() => { setModalOpen(false) }}
            >
                取消
            </Button>
        </div>
    )

    //编辑客户footer
    const EditModalFooter = (
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button
                type="primary"
                style={{ marginRight: 16, borderRadius: 6 }}
                onClick={editCustomerList}
            >
                确定
            </Button>
            <Button
                style={{ marginRight: 16, borderRadius: 6 }}
                onClick={() => { setEditModalOpen(false) }}
            >
                取消
            </Button>
        </div>
    )

    //分页器
    const paginationConfig = {
        total: total,
        onChange: (page: number, pageSize?: number) => {
            setPage(page);
        },
        showTotal: (total: number, range: [number, number]) => `共 ${total} 条数据`,
    }

    return (
        <div className={styles.customerContainer}>
            <div className={styles.header}>
                <Input
                    value={searchValue}
                    onChange={handleChange}
                    style={{ width: 240 }}
                    allowClear
                    placeholder="搜索客户"
                    className={styles.input}
                    suffix={<SearchOutlined onClick={onSearch} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />}
                    onPressEnter={onSearch}
                />

                <Button
                    type="primary"
                    style={{ marginRight: 20 }}
                    onClick={() => { setModalOpen(true) }}
                >
                    新增客户
                </Button>
            </div>
            {/* 新增客户 */}
            {modalOpen &&
                <Modal
                    open={modalOpen}
                    title="新增客户"
                    onCancel={() => { setModalOpen(false) }}
                    footer={ModalFooter}
                >
                    <Form
                        form={form}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                    >
                        <Form.Item label="客户姓名" name="customer_name">
                            <Input />
                        </Form.Item>
                        <Form.Item label="客户电话" name="customer_tel">
                            <Input />
                        </Form.Item>
                        <Form.Item label="客户所在公司" name="customer_company">
                            <Input />
                        </Form.Item>
                        <Form.Item label="公司介绍" name="customer_detail">
                            <Input.TextArea />
                        </Form.Item>
                    </Form>
                </Modal>
            }
            {/* 编辑客户 */}
            {editModalOpen &&
                <Modal
                    open={editModalOpen}
                    title="编辑客户"
                    onCancel={() => { setEditModalOpen(false) }}
                    footer={EditModalFooter}
                >
                    <Form form={form1}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                    >
                        <Form.Item label="客户姓名" name="customer_name">
                            <Input />
                        </Form.Item>
                        <Form.Item label="客户电话" name="customer_tel">
                            <Input />
                        </Form.Item>
                        <Form.Item label="客户所在公司" name="customer_company">
                            <Input />
                        </Form.Item>
                        <Form.Item label="公司介绍" name="customer_detail">
                            <Input.TextArea />
                        </Form.Item>
                    </Form>
                </Modal>
            }
            <Table columns={columns} dataSource={data} pagination={paginationConfig} />
        </div>
    );
};

export default WareHouseManagement;